<template>
  <div>
    <el-menu class="serverList">
      <el-menu-item
        id="@me"
        @click="home"
        :class="{ active: currentServerId === '@me' }"
      >
        <router-link to="/channels/@me/my_friend"
          ><el-popover
            placement="right"
            :width="120"
            trigger="hover"
            content="Home"
          >
            <template #reference>
              <img
                src="../../assets/discord.png"
                :alt="个人中心"
                class="cover"
              />
            </template> </el-popover
        ></router-link>
      </el-menu-item>

      <el-menu-item
        v-for="(item, i) in serverList"
        :key="i"
        @click="selectServer(item.serverId, item.lastSessionId)"
        :class="{ active: item.serverId === currentServerId }"
      >
        <router-link
          :to="{
            path: '/channels/' + item.serverId + '/' + item.lastSessionId,
          }"
          ><el-popover
            placement="right"
            :width="120"
            trigger="hover"
            :content="item.serverName"
          >
            <template #reference>
              <img
                src="../../assets/2.png"
                :alt="item.serverName"
                class="cover"
              />
            </template> </el-popover
        ></router-link>
      </el-menu-item>

      <el-menu-item
        @click="
          createServerVisable = true;
          createServerName = '';
        "
        ><el-popover
          placement="right"
          :width="120"
          trigger="hover"
          content="Create Server"
        >
          <template #reference>
            <img src="../../assets/search.png" class="cover" />
          </template> </el-popover
      ></el-menu-item>
      <el-dialog
        v-model="createServerVisable"
        title="创建社区"
        append-to-body="true"
      >
        <el-form>
          <el-form-item label="社区昵称">
            <el-input v-model="createServerName"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="createServer">Create</el-button>
          </span>
        </template>
      </el-dialog>

      <el-menu-item @click="searchServer">
        <el-popover
          placement="right"
          :width="120"
          trigger="hover"
          content="Search Servers"
        >
          <template #reference>
            <img src="../../assets/find.png" class="cover" />
          </template>
        </el-popover>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.el-menu-item {
  height: 60px;
  border-radius: 23px;
  margin: 10px 5px;
}
.active {
  background-color: white;
}
/*服务器的封面的css，搞了好久*/
.cover {
  position: absolute;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
  border-radius: 20px;
}
.serverList {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 70px;
  height: 100%;
  background-color: #252528;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  display: none;
}
</style>

<script>
import { useStore } from "vuex";
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
//import axios from "axios";
//import { ElMessage } from "element-plus";

export default {
  name: "ServerList",
  //组合式api
  setup() {
    const store = useStore();
    const router = useRouter();
    const currentServerId = ref("");
    const serverList = ref([]);
    const createServerVisable = ref(false);
    const createServerName = ref("");
    const getServerList = async () => {
      serverList.value = await store.getters.serverList;
      //从后端获取serverList
    };

    const selectServer = (serverId, lastSessionId) => {
      store.commit("SELECT_SERVER", serverId);
      store.commit("SELECT_SESSION", lastSessionId);
    };
    const searchServer = () => {
      router.push("/guild-discovery");
    };

    const createServer = () => {
      if (createServerName.value === "") return;
      serverList.value.push({
        serverId: "20",
        serverName: createServerName.value,
        serverImg: "",
        lastSessionId: "20_1",
      });
    };
    const home = () => {
      let id = "@me";
      store.commit("SELECT_SERVER", id);
    };

    onMounted(getServerList);

    watch(
      () => store.getters.CurrentServerId,
      (val, old) => {
        console.log(val, old);
        currentServerId.value = val;
      }
    );

    return {
      currentServerId,
      serverList,
      createServerVisable,
      createServerName,
      selectServer,
      getServerList,
      searchServer,
      createServer,
      home,
    };
  },
};
</script>
